<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>中国华电集团有限公司</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../content/default/css/Font-Awesome/css/font-awesome.css">
    <link rel="stylesheet" href="../content/common/layui/css/layui.css">
    <link rel="stylesheet" href="../content/default/css/layout.css">
    <link rel="stylesheet" href="../content/default/css/index2.css">
    <style>
        .clear:after {
            display: block;
            content: '';
            clear: both;
        }

        .clear {
            zoom: 1;
        }
        .bs-warp2 .bs-main{
            background: #eff6fe;
            padding: 20px;
            padding-top: 100px;
        }
        .iframe-nav {
            border-bottom: 1px solid #dddddd;
            margin-bottom: 10px;
        }

        .iframe-nav li {
            height: 38px;
            line-height: 38px;
            color: #636363;
            font-size: 14px;
            border:1px solid #dddddd;
            background: #f5f5f5;
            border-bottom: none;
            float: left;
            padding: 0 10px;
            border-radius: 2px;
            margin-right: 10px;
        }
        .iframe-nav li span{
            float: left;
            margin-left: 5px;
        }
        .iframe-nav li .close{
            width: 13px;
            height: 13px;
            margin-top: 13px;
            background: url(../content/default/image/zk/close.png) no-repeat center;
            cursor: pointer;
        }
        .iframe-nav li.active{
            background: #206def;
            color: #fff;
        }
        .iframe-nav li.active .close{
            width: 13px;
            height: 13px;
            margin-top: 13px;
            background: url(../content/default/image/zk/close-white.png) no-repeat center;
        }
        iframe{
            height: calc(100% - 150px);
        }
    </style>
</head>

<body class="full">
    <div class="bs-warp bs-warp2">
        <header class="bs-header">
            <div class="clearfix">
                <img src="../content/default/image/head/logo.png" alt="" class='logoImg'>

                <div class="user_center pull-right">
                    <div class="clearfix"><img src="../content/default/image/head/user-icon.png"><span>daicheng</span><i class="header_up"></i></div>
                    <!-- <ul class="user_list">
                        <li><img src="content/default/image/head/user_center_icon1.png">修改密码</li>
                        <li><img src="content/default/image/head/user_center_icon2.png">帮助中心</li>
                        <li><img src="content/default/image/head/user_center_icon3.png">退出系统</li>
                    </ul> -->
                </div>
                    <ul class="header_list pull-right">
                        <li>
                            <div>常用菜单</div>
                            <!-- <ul class="backlog_list">
                                <li>
                                    <a href="javascript:;">安全检查<span>1</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">安全会议<span>2</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">通知公告<span>3</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">应急演练<span>4</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">待评估隐患<span>5</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">待整改隐患<span>6</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">待验收隐患<span>7</span></a>
                                </li>
                            </ul> -->
                        </li>
                        <li>
                            安全应急视图
                        </li>
                        <li>
                            <div>当前单位：中国华电集团</div>
                            <!-- <ul class="backlog_list" >
                                <li>
                                    <a href="javascript:;">中国华电集团<span>1</span></a>
                                </li>
                                <li>
                                    <a href="javascript:;">中国华电集团<span>2</span></a>
                                </li>
                            
                            </ul> -->
                            
                        </li>
                    </ul>
            </div>
        </header>
        <aside class="bs-aside">
            <a href="javascript:;" class="bs-toggle">
                <span class="fa "></span>
            </a>
            <ul class="bs-nav layui-nav layui-nav-tree layui-inline" lay-filter="demo">
                <li class="layui-this layui-nav-item">
                    <a href="javascript:;"><i class="nav_icon nav_icon1"></i><span>我是一级菜单</span> </a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="nav_icon nav_icon1"></i><span>我是二级菜单</span></a></a>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;"><i class="nav_icon nav_icon1"></i><span>我是二级菜单</span></a>
                    <dl class="layui-nav-child">
                        <dd>
                                                    <a href="javascript:;">我是三级菜单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">我是三级菜单</a>
                        </dd>
                        <dd>
                            <a href="javascript:;">我是三级菜单</a>
                        </dd>
                    </dl>
                </li>
            </ul>
        </aside>

        <div class="bs-main">
            <ul class="iframe-nav clear">
                <li>
                    <span>可选页面</span>
                    <span class="close"></span>
                </li>
                <li class="active">
                    <span>实时预警详情</span>
                    <span class="close"></span>
                </li>
                <li>
                    <span>可选页面</span>
                    <span class="close"></span>
                </li>
            </ul>
            <iframe style="display:block;" frameborder="0" width="100%" style="border: 0;"
                src="./实时预警详情iframe.html"></iframe>
        </div>
    </div>

    <script src="../content/common/jquery-3.3.1.min.js"></script>
    <script src="../content/common/nicescroll.min.js"></script>
    <script src="../content/common/layui/layui.all.js"></script>
    <script src="../content/common/layout-common.js"></script>
    <script type="text/javascript">
        var deviceWidth
        setHtmlFontSize()

        if (window.addEventListener) {
            window.addEventListener('resize', function () {
                setHtmlFontSize()
            }, false)
        }

        function setHtmlFontSize() {
            // 1366是设计稿的宽度，当大于1366时采用1366宽度，比例也是除以13.66
            deviceWidth = document.documentElement.clientWidth > 1920 ? 1020 : document.documentElement.clientWidth
            document.getElementsByTagName('html')[0].style.cssText = 'font-size:' + deviceWidth / 19.20 +
                'px !important'
        }
        $(function () {
            $('.bs-main').niceScroll({
                autohidemode: false
            });
            $('.bs-nav').niceScroll({
                autohidemode: "cursor",
                cursoropacitymax: 0
            });

            $('.nav_list li').on('click', function () {
                var index = $(this).index();
                $(this).attr('class', 'select').siblings().removeAttr('class', 'select');
            })
        })
    </script>
</body>

</html>